<template>
    <div>
        <div class="header">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="用户名称">
                    <el-input v-model="searchForm.user" placeholder="请输入用户名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-button>新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户名" prop="account" >

            </el-table-column>
            <el-table-column label="等级" prop="level">

            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="deleteAccount(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue'
//引入接口请求
import { getDataApi } from '../utils/mockServer/db.js'


//定义搜索的表单对象
const searchForm = ref({
    account: ''
})
//列表数据 
const tableData = ref([])


//定义获取全部数据的方法，等待调用
const getData = (account) => {
    //1.调用接口，获取全部的数据
    //2.将得到的后台数据给到我们的列表数据
    // getDataApi(account)
    // console.log(getDataApi(account));
    tableData.value = getDataApi({ account })
}
//调用获取全部数据
getData()

//定义搜索的方法，并在方法中传入要搜索的内容，然后调用获取全部数据的方法 getData
const handleSearch = () => {
    //获取全部数据的方法
    getData(searchForm.value.account)
}
//1.定义删除的方法，并绑定到按钮上
const deleteAccount =()=>{

}
//2.引入删除的接口
//3.配置符合删除接口的数据
//4.调用删除接口
//5.提示删除
//6.重新获取数据


</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
}
</style>